<!-- 交互层 负责布局与组件间值传递 -->


<template>
    <h1>简单开发流程示例</h1>
    <h4>
        <span>{{ FrameworkStore.count }}</span>
        <br>
        <a-button type="primary" @click="addEvent" size="small">+</a-button>
    </h4>
    <span>组件一</span>
    <CVue v-model:value="FrameworkStore.Test1" />
    <span>组件二</span>
    <CVue v-model:value="FrameworkStore.Test2" />
    <span>结果显示</span>
    <br>
    <span>{{ FrameworkStore.Test1 }} {{ FrameworkStore.Test2 }}</span>
    <br>
    <span>数据处理结果显示</span>
    <br>
    <span>{{FrameworkStore.TestStr}}</span>
    <br>
    <a-button type="primary" :loading="ButtonLoading" @click="action">重置</a-button>
</template>
<script setup>
// 引用动作层
import { GetFrameworkStore } from './store';
import CVue from './compontent1.vue';
import { ref } from 'vue';
const FrameworkStore = GetFrameworkStore();


const ButtonLoading = ref(false);
const action = async () => {
    ButtonLoading.value = true;
    await FrameworkStore.TestEvent();
    ButtonLoading.value = false;
}

const addEvent = () => {
    FrameworkStore.add();
}

</script>
<style lang="less" scoped>
</style>